<template>
  <div class="crimeSceneList">
    <div class="content-title c-topFilter">
      <div>{{ buildingAlias }}</div>
      <!-- 按钮 -->
      <div>
        <Button type="primary"> <a
            href="https://images.tospurfang.com/doc/%E4%BA%A7%E5%93%81%E7%AE%A1%E7%90%86%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.pdf"
            style="color:#fff;" target="_blank">查看操作指引</a>
        </Button>
        <Button type="primary" @click.stop="newAddPlate('add')" v-if="unlocking('0103010100')"
          style="margin-left:10px;">
          新建地块
        </Button>
      </div>
    </div>
    <div class="no_data" v-if="platelist.length == 0">暂无地块信息</div>
    <div v-else>
      <div class="plate_warp" v-for="(itemW, index) in platelist" :key="index">
        <div class="palte_title">
          <div>
            {{ itemW.plateName}}<span v-if="unlocking('0103010200')"
              @click.stop="newAddPlate('edit', itemW)" class="change_txt">编辑</span><span
              v-if="itemW.productDTOS.length == 0&&unlocking('0103010300')"
              @click.stop="delPlate(itemW)" class="change_txt">删除</span>
          </div>
          <!-- 按钮 -->
          <Button type="success" v-if="unlocking('0103010400')"
            @click.stop="newAddProduct('add', itemW)">
            新建产品
          </Button>
        </div>
        <div class="no_data" v-if="itemW.productDTOS.length == 0">
          该地块下暂无产品
        </div>
        <div v-else>
          <div class="product_warp clearfloat">
            <div class="product_main" v-for="(item, index) in itemW.productDTOS" :key="index"
              @click.stop="toModelSetting(item)">
              <div class="product_title">
                <div>{{ item.productName }}</div>
                <div class="change_txt">
                  <span v-if="unlocking('0103010500')"
                    @click.stop="newAddProduct('edit', item)" class="change_txt">编辑</span><span
                    v-if="!item.buildingCount&&unlocking('0103010600')"
                    @click.stop="delProduct(item)" class="change_txt">删除</span>
                </div>
              </div>
              <div class="product_content">
                <div class="product_left">
                  <div class="product_item">
                    <span class="label">产品类型：</span>
                    <span class="label">{{
                      $formatter.switchName("productType", item.productType)
                    }}</span>
                  </div>
                  <div class="product_item">
                    <span class="label">合作模式：</span>
                    <span class="label">{{
                      $formatter.switchName(
                        "cooperationModeAttrSort",
                        item.coopMode
                      )
                    }}</span>
                  </div>
                </div>
                <div class="product_right">
                  <div class="product_item">
                    <span class="label">楼栋数：</span>
                    <span class="label">{{ item.buildingCount }}</span>
                  </div>
                  <div class="product_item">
                    <span class="label">销售模式：</span>
                    <span class="label">{{
                      $formatter.switchName("salesModel", item.sellMode)
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 地块编辑弹窗 -->
    <plate-modal ref="plateModal" @saveProductSuccess="getplatelist" />
    <!-- 产品编辑弹窗 -->
    <product-modal ref="productModal" @saveProductSuccess="getplatelist"></product-modal>
  </div>
</template>
<script>
  import productApi from '@/biz/modeling/product'
  import productModal from './components/productModal'
  import PlateModal from './components/PlateModal'
  export default {
    components: { productModal, PlateModal },
    data() {
      return {
        Productflag: false,
        buildingAlias: '',
        platelist: [], //地块列表
      }
    },
    methods: {
      toModelSetting(item) {
        this.$router.push({
          name: 'modelingSettings',
          params: {
            productId: item.productId,
            plateId: item.plateId,
          },
        })
      },
      //获取指定案场所有地块
      getplatelist() {
        let params = {
          housesId: this.housesId,
        }
        productApi.platelist(params).then((res) => {
          console.log(res, '获取指定案场所有地块')
          this.platelist = res
        })
      },
      //新增、编辑地块
      newAddPlate(type, data) {
        this.$refs.plateModal.newAddPlate(type, data)
      },
      //删除地块
      delPlate(obj) {
        this.$Modal.confirm({
          title: '确认删除该地块？',
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            console.log('确定按钮')
            let params = {
              plateId: obj.plateId,
            }
            productApi.plateDel(params).then((res) => {
              console.log(res, '删除地块')
              this.$Message.success('删除地块成功')
              this.getplatelist()
            })
          },
        })
      },
      //新增、编辑产品
      newAddProduct(type, data) {
        console.log(type, data, '新增、编辑产品')
        this.$refs.productModal.newAddProduct(type, data)
      },
      //删除产品
      delProduct(obj) {
        this.$Modal.confirm({
          title: '确认删除该产品？',
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            let params = {
              productId: obj.productId,
            }
            productApi.productDel(params).then((res) => {
              console.log(res, '删除产品')
              this.$Message.info('删除产品成功')
              this.getplatelist()
            })
          },
        })
      },
    },
    created() {
      let buildMess = this.$dt.buildInfo()
      this.buildingAlias = buildMess.housesName
      this.housesId = buildMess.housesId
      this.getplatelist()
    },
    mounted() {
      console.log(this.$route, '$route')
      if (JSON.stringify(this.$route.params) != '{}') {
        this.$refs.productModal.newAddProduct('edit', this.$route.params)
      }
    },
  }
</script>
<style lang='scss' scoped>
  .crimeSceneList {
    padding: 20px;

    .no_data {
      text-align: center;
      font-size: 18px;
      line-height: 30px;
      padding: 10px 0;
    }

    .change_txt {
      color: #2d8cf0;
      cursor: pointer;
      display: inline-block;
      margin-left: 10px;
    }

    .content-title {
      min-width: 1100px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      line-height: 30px;
      font-size: 26px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 20px;
    }

    .plate_warp {
      margin-bottom: 30px;

      .palte_title {
        display: flex;
        justify-content: space-between;
        border: 1px solid #ccc;
        line-height: 30px;
        font-size: 16px;
        padding: 10px;
      }
    }

    .product_warp {
      .product_main {
        padding: 15px;
        border: 1px solid #ccc;
        width: 25%;
        margin: 10px 10px;
        float: left;

        .product_title {
          display: flex;
          justify-content: space-between;
          line-height: 25px;
          font-size: 15px;
          padding-bottom: 10px;
          border-bottom: 1px solid #ccc;
        }

        .product_content {
          font-size: 15px;
          line-height: 30px;
          display: flex;
          justify-content: space-between;
          padding-top: 10px;
        }
      }
    }

    .clearfloat:after {
      display: block;
      clear: both;
      content: '';
      visibility: hidden;
      height: 0;
    }

    .clearfloat {
      zoom: 1;
    }
  }

  .cityList_moudle_footer {
    display: flex;
    justify-content: space-around;
    margin-top: 16px;
  }
</style>